<!--威胁活跃趋势-->
<template>
  <div class="threat-trends-container">
    <div class="detail-card-area">
      <div class="card-title">
        <h3>影响事件趋势</h3>
      </div>
      <div class="content-area">
        <div class="event-chart" ref="eventChart"></div>
      </div>
    </div>
    <div class="detail-card-area">
      <div class="card-title">
        <h3>影响目标趋势</h3>
      </div>
      <div class="content-area">
        <div class="event-chart" ref="targetChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {formatTimeByMoment} from "@/utils/time.js";

const mockLineData = [
  {
    "viewDay": "20240401",
    "eventNum": 0
  },
  {
    "viewDay": "20240402",
    "eventNum": 0
  },
  {
    "viewDay": "20240403",
    "eventNum": 0
  },
  {
    "viewDay": "20240404",
    "eventNum": 0
  },
  {
    "viewDay": "20240405",
    "eventNum": 3
  },
  {
    "viewDay": "20240406",
    "eventNum": 1
  },
  {
    "viewDay": "20240407",
    "eventNum": 1
  },
  {
    "viewDay": "20240408",
    "eventNum": 0
  },
  {
    "viewDay": "20240409",
    "eventNum": 0
  },
  {
    "viewDay": "20240410",
    "eventNum": 0
  },
  {
    "viewDay": "20240411",
    "eventNum": 0
  },
  {
    "viewDay": "20240412",
    "eventNum": 0
  },
  {
    "viewDay": "20240413",
    "eventNum": 0
  },
  {
    "viewDay": "20240414",
    "eventNum": 0
  },
  {
    "viewDay": "20240415",
    "eventNum": 0
  },
  {
    "viewDay": "20240416",
    "eventNum": 0
  },
  {
    "viewDay": "20240417",
    "eventNum": 0
  },
  {
    "viewDay": "20240418",
    "eventNum": 0
  },
  {
    "viewDay": "20240419",
    "eventNum": 0
  },
  {
    "viewDay": "20240420",
    "eventNum": 0
  },
  {
    "viewDay": "20240421",
    "eventNum": 0
  },
  {
    "viewDay": "20240422",
    "eventNum": 0
  },
  {
    "viewDay": "20240423",
    "eventNum": 0
  },
  {
    "viewDay": "20240424",
    "eventNum": 0
  },
  {
    "viewDay": "20240425",
    "eventNum": 0
  },
  {
    "viewDay": "20240426",
    "eventNum": 0
  },
  {
    "viewDay": "20240427",
    "eventNum": 0
  },
  {
    "viewDay": "20240428",
    "eventNum": 0
  },
  {
    "viewDay": "20240429",
    "eventNum": 0
  }
];
const mockBarData = [
  {
    "victimDeptCnt": 0,
    "viewDay": "20240401"
  },
  {
    "victimDeptCnt": 0,
    "viewDay": "20240402"
  },
  {
    "victimDeptCnt": 0,
    "viewDay": "20240403"
  },
  {
    "victimDeptCnt": 0,
    "viewDay": "20240404"
  },
  {
    "victimDeptCnt": 1,
    "viewDay": 20240405
  },
  {
    "victimDeptCnt": 1,
    "viewDay": 20240406
  },
  {
    "victimDeptCnt": 1,
    "viewDay": 20240407
  },
  {
    "victimDeptCnt": 0,
    "viewDay": "20240408"
  },
  {
    "victimDeptCnt": 0,
    "viewDay": "20240409"
  },
  {
    "victimDeptCnt": 0,
    "viewDay": "20240410"
  },
];
export default {
  name: "ThreatTrendsChart",
  props: {
    viewName: {
      type: String,
      required: true,
    },
    viewType: {
      type: Number,
      required: true,
    },
    datePickerValue: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  created() {
    this.initComp();
  },
  methods:{
    initComp(){
      console.log('威胁活跃趋势组件获取数据了------', this.datePickerValue);
      this.getLineData();
      this.getBarData();
    },
    getLineData(){
      new Promise((resolve)=>{
        resolve(true)
      }).then(()=>{
        this.formatLineData(mockLineData);
      })
    },
    formatLineData(data){
      const XData = [];
      const SData = [];
      for (const item of data) {
        XData.push(formatTimeByMoment(item.viewDay, 'YYYY-MM-DD'));
        SData.push(item.eventNum + Math.floor(Math.random() * 20));
      }
      this.initLineChart(XData, SData, data);
    },
    initLineChart(XData, SData) {
      const option = {
        tooltip: {
          trigger: "axis",
          /*formatter(params) {
            console.log(params)
          }*/
        },
        grid: {
          top: '15%',
          bottom: 0,
          left: '3%',
          right: '3%',
          containLabel: true,
        },
        legend: {
          show: false
        },
        color: ["#426bda"],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: { // 坐标轴 轴线
            show: true, // 是否显示
            //  -----   箭头 -----
            // symbol: ['none', 'arrow'],  // 是否显示轴线箭头
            // symbolSize: [8, 8], // 箭头大小
            // symbolOffset: [0, 7], // 箭头位置
            // ----- 线 -------
            lineStyle: {
              color: '#E1E3ED',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#999',
              // padding: 16,
              fontSize: 12,
            },

          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#f2f2f2',
            },
          },
          axisTick: {
            show: true,
          },
          data: XData,
        },
        yAxis: {
          type: 'value',
          name: '单位/个',
          splitLine: {
            show: false,
            lineStyle: {
              color: '#f2f2f2',
            },
          },
          axisLine: { // 坐标轴 轴线
            show: true, // 是否显示
            //  -----   箭头 -----
            // symbol: ['none', 'arrow'],  // 是否显示轴线箭头
            // symbolSize: [8, 8], // 箭头大小
            // symbolOffset: [0, 7], // 箭头位置
            // ----- 线 -------
            lineStyle: {
              color: '#E1E3ED',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#999',
              fontSize: 12,
            },
            formatter: function (value) {
              if (value === 0) {
                return value;
              }
              return value;
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "数量",
            type: "line",
            smooth: true,
            data: SData,
          },
        ],
      };
      let chart = this.$echarts.init(this.$refs.eventChart);
      chart.setOption(option, true);
      chart.resize(true);
    },
    getBarData() {
      new Promise((resolve)=>{
        resolve(true)
      }).then(()=>{
        this.formatBarData(mockBarData);
      })
    },
    formatBarData(data){
      const XData = [];
      const SData = [];
      const color = ['#EB5F5E', '#FC7F54', '#F59E3B', '#436BD9'];
      let len = color.length;
      for (const [index, item] of data.entries()) {
        XData.push(formatTimeByMoment(String(item.viewDay), 'YYYY-MM-DD'));
        SData.push({
          value: item.victimDeptCnt + Math.floor(Math.random() * 20),
          itemStyle: {
            color: color[index % len]
          }
        });
      }
      this.initBarChart(XData, SData, color, data);
    },
    initBarChart(XData, SData, color){
      const option = {
        color: color,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '6%',
          bottom: '0%',
          left: '3%',
          right: '3%',
          containLabel: true,
        },
        xAxis: [{
          type: 'category',
          data: XData,
          axisLine: { // 坐标轴 轴线
            show: true, // 是否显示
            //  -----   箭头 -----
            // symbol: ['none', 'arrow'],  // 是否显示轴线箭头
            // symbolSize: [8, 8], // 箭头大小
            // symbolOffset: [0, 7], // 箭头位置
            // ----- 线 -------
            lineStyle: {
              color: '#E1E3ED',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel:  {
            // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#999',
              // padding: 16,
              fontSize: 12,
            },
            interval: 0,
            formatter: function(value) { //如果再不行就用formatter自己来截取换行
              if(value.length > 4 ){
                return value.substring(0,7)+'...';
              }
              return value;
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#f2f2f2',
            },
          },
          axisTick: {
            show: true,
          },
        }],
        yAxis: [{
          type: 'value',
          splitLine: {
            show: false,
            lineStyle: {
              color: '#f2f2f2',
            },
          },
          axisLine: { // 坐标轴 轴线
            show: true, // 是否显示
            //  -----   箭头 -----
            // symbol: ['none', 'arrow'],  // 是否显示轴线箭头
            // symbolSize: [8, 8], // 箭头大小
            // symbolOffset: [0, 7], // 箭头位置
            // ----- 线 -------
            lineStyle: {
              color: '#E1E3ED',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#999',
              fontSize: 12,
            },
            formatter: function (value) {
              if (value === 0) {
                return value;
              }
              return value;
            },
          },
          axisTick: {
            show: true,
          },
        }],
        series: [{
          name: '',
          type: 'bar',
          // barWidth: '60%',
          barWidth: 12,
          itemStyle: { // 图形的形状
            barBorderRadius: [8, 8, 0, 0]
          },
          data: SData,
        }]
      };
      let chart = this.$echarts.init(this.$refs.targetChart);
      chart.setOption(option, true);
      chart.resize(true);
    }
  }
}
</script>

<style lang="scss">
.threat-trends-container{
  width: 100%;
  display: flex;
  .detail-card-area {
    flex: 1;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 10px;
    .card-title {
      width: 100%;
      height: 45px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;

      > h3 {
        font-size: 16px;
        font-weight: bold;
      }
    }
    &:first-of-type{
      margin-right: 24px;
    }
  }
  .content-area {
    width: 100%;
    height: 253px;
    padding: 0 15px 15px 15px;

    .event-chart {
      width: inherit;
      height: 233px;
    }
  }
}
</style>